import * as echarts from 'echarts'
class chartOPtion {
	process() {
		let data = [
			{
				name: '被侵害',
				value: 4158,
				count: 8124,
			},
			{
				name: '身体受伤',
				value: 6024,
				count: 10268,
			},
			{
				name: '被虐待',
				value: 7248,
				count: 11489,
			},
		]

		let yaxisData = []
		let countList = []
		data.map((item) => {
			yaxisData.push(item.name)
			countList.push(item.count)
		})
		let max = Math.max(...countList)
		console.log(max)

		let xData = []
		let yData = []
		let markPointData = []
		let backgroundData = []
		data.map((item, index) => {
			xData.push(item.name)
			yData.push({
				value: (item.value / item.count) * max,
				symbolBoundingData: max,
			})
			backgroundData.push(max)
		})
		return {
			grid: {
				containLabel: true,
				left: 0,
				right: 0,
				top: 0,
				bottom: 0,
			},
			xAxis: {
				show: false,
				max: max,
				type: 'value',
				axisLine: {
					show: false,
				},
				axisTick: {
					show: false,
				},
				axisLabel: {
					show: false,
				},
				splitLine: {
					show: false,
				},
			},
			yAxis: {
				type: 'category',
				// data: data,
				barWidth: 15,
				inverse: false,
				axisLine: {
					show: false,
				},
				axisTick: {
					show: false,
				},
				axisLabel: {
					textStyle: {
						color: '#fff',
						fontSize: 10,
					},
				},
				data: yaxisData,
			},
			series: [
				{
					type: 'bar',
					data: data,
					barWidth: 14,
					itemStyle: {
						normal: {
							color: 'rgba(252,252,252,0)',
						},
					},
					z: 1,
				},
				{
					type: 'pictorialBar',
					z: 3,
					symbol: 'rect',
					symbolSize: [5, 14],
					symbolMargin: 2,
					symbolClip: true,
					symbolBoundingData: max,
					data: yData,
					symbolRepeat: 'fixed',
					symbolPosition: 'start',
					itemStyle: {
						normal: {
							color: {
								x: 0,
								y: 0,
								x2: 1,
								y2: 0,
								colorStops: [
									{
										offset: 0,
										color: 'rgba(0, 102, 255, 1)',
									},
									{
										offset: 1,
										color: 'rgba(0, 210, 255, 1)',
									},
								],
							},
						},
					},
				},
				{
					type: 'pictorialBar',
					z: 2,
					symbol: 'rect',
					symbolSize: [5, 14],
					symbolMargin: 2,
					symbolClip: true,
					symbolBoundingData: max,
					data: backgroundData,
					symbolRepeat: 'fixed',
					symbolPosition: 'start',
					itemStyle: {
						normal: {
							color: 'rgba(84, 217, 255, 0.3)',
						},
					},
				},
			],
		}
	}
	process2() {
		let myColor = ['#00CCFF']
		let dataLine = [50, 66, 33, 25]
		let positionLeft = 0.4,
			max = 100 + 2 * positionLeft
		return {
			grid: [
				{
					left: '8%',
					top: '0%',
					right: '5%',
					bottom: '0%',
					containLabel: true,
				},
				{
					left: '10%',
					top: '0%',
					right: '5%',
					bottom: '0%',
					containLabel: true,
				},
			],
			xAxis: [
				{
					max: max,
					show: false,
				},
			],
			yAxis: [
				{
					axisTick: 'none',
					axisLine: 'none',
					offset: '27',
					axisLabel: {
						textStyle: {
							color: '#fff',
							fontSize: '10',
						},
					},
					data: ['被投诉单位', '被处罚记录', '食品安全', '药品安全'],
				},
				{
					axisTick: 'none',
					axisLine: 'none',
					show: false,
					axisLabel: {
						textStyle: {
							color: '#ffffff',
							fontSize: '16',
						},
					},
					data: [1, 1, 1, 1],
				},
				{
					axisLine: {
						lineStyle: {
							color: 'rgba(0,0,0,0)',
						},
					},
					data: [],
				},
			],
			series: [
				{
					//间距
					type: 'bar',
					barWidth: 8,
					stack: 'b',
					legendHoverLink: false,
					itemStyle: {
						normal: {
							color: '#00CCFF',
						},
					},

					data: [positionLeft, positionLeft, positionLeft, positionLeft],
				},
				{
					name: '条',
					type: 'bar',
					stack: 'b',
					yAxisIndex: 0,
					data: dataLine,
					label: {
						normal: {
							show: false,
							position: 'right',
							distance: 10,
							formatter: function (param) {
								return param.value
							},
							textStyle: {
								color: '#ffffff',
								fontSize: '16',
							},
						},
					},
					barWidth: 10,
					itemStyle: {
						normal: {
							color: function (params) {
								var num = myColor.length
								return myColor[params.dataIndex % num]
							},
						},
					},
					z: 2,
				},
				{
					name: '白框',
					type: 'bar',
					yAxisIndex: 1,
					barGap: '-100%',
					data: [99.8, 99.9, 99.9, 99.9],
					barWidth: 21,
					itemStyle: {
						normal: {
							color: '#0e2147',
							barBorderRadius: 2,
						},
					},
					z: 1,
				},
				{
					name: '外框',
					type: 'bar',
					yAxisIndex: 2,
					barGap: '-100%',
					data: [100, 100, 100, 100],
					barWidth: 23,
					label: {
						normal: {
							show: true,
							position: 'right',
							distance: 10,
							formatter: function (data) {
								return dataLine[data.dataIndex]
							},
							textStyle: {
								color: '#ffffff',
								fontSize: '10',
							},
						},
					},
					itemStyle: {
						normal: {
							color: function (params) {
								var num = myColor.length
								return myColor[params.dataIndex % num]
							},
							barBorderRadius: 0,
						},
					},
					z: 0,
				},
			],
		}
	}
	pine() {
		return {
			series: [
				{
					name: '',
					type: 'pie',
					zlevel: 2,
					radius: ['20%', '60%'],
					center: ['45%', '50%'],
					color: ['#37BEF8', '#214EF6'],
					label: {
						show: false,
					},
					labelLine: {
						show: false,
					},
					tooltip: {
						show: false,
					},
					data: [
						{
							value: 41,
							name: '',
						},
						{
							value: 20,
							name: '',
						},
					],
				},
				{
					name: 'title',
					type: 'pie',
					zlevel: 3,
					hoverAnimation: false,
					legendHoverLink: false,
					radius: ['25%', '70%'],
					center: ['45%', '50%'],
					color: ['#37BEF8', '#214EF6'],
					label: {
						show: false,
						formatter: '{bb|{b}:}{cc|{c}}\n{dd|{d}%}',
						//                 formatter: (params) => {
						//                     return `
						//  ${params.name}: ${params.data.value}个
						// ${params.percent}%
						//  `;
						//                 },
						rich: {
							bb: {
								height: 300,
								align: 'left',
								fontSize: 40,
								verticalAlign: 'middle',
								fontFamily: 'siyuan',
							},
							cc: {
								height: 300,
								align: 'left',
								fontSize: 40,
								verticalAlign: 'middle',
								fontFamily: 'dsDigital2',
							},
							dd: {
								height: 300,
								align: 'left',
								fontSize: 40,
								verticalAlign: 'middle',
								fontFamily: 'dsDigital2',
							},
						},
						padding: [0, -30],
						textStyle: {
							lineHeight: 70,
						},
					},
					labelLine: {
						show: false,
						// showAbove:true,
						length: 30,
						length2: 50,
					},
					itemStyle: {
						shadowBlur: 10,
						shadowColor: 'rgba(0, 0, 0, 0.3)',
					},
					data: [
						{
							value: 41,
							name: '低级',
							label: {
								color: '#f3e64a',
							},
						},
						{
							value: 20,
							name: '中级',
							label: {
								color: '#2dbbed',
							},
						},
					],
				},
			],
		}
	}
	// 柱形图
	bar() {
		return {
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					// 坐标轴指示器，坐标轴触发有效
					type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
				},
			},
			grid: {
				left: '2%',
				right: '4%',
				bottom: '14%',
				top: '16%',
				containLabel: true,
			},
			legend: {
				show: false,
				// data: ['1', '2', '3'],
				right: 10,
				top: 12,
				textStyle: {
					color: '#fff',
				},
				itemWidth: 12,
				itemHeight: 10,
				// itemGap: 35
			},
			xAxis: {
				type: 'category',
				data: ['食品店', '杂货店', '烟酒（烟杂）', '超市百货', '其他'],
				axisLine: {
					lineStyle: {
						color: 'white',
					},
				},
				axisLabel: {
					// interval: 0,
					rotate: 40,
					textStyle: {
						fontFamily: 'Microsoft YaHei',
					},
				},
			},

			yAxis: {
				type: 'value',
				axisLine: {
					show: false,
					lineStyle: {
						color: 'white',
					},
				},
				splitLine: {
					show: true,
					lineStyle: {
						color: 'rgba(255,255,255,0.3)',
					},
				},
				axisLabel: {},
			},
			series: [
				{
					name: '3',
					type: 'bar',
					barWidth: '15%',
					itemStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{
									offset: 0,
									color: '#22C6ED',
								},
								{
									offset: 1,
									color: '#213FF7',
								},
							]),
							barBorderRadius: 5,
						},
					},
					data: [80, 18, 17, 83, 36],
				},
			],
		}
	}
}
export default chartOPtion
